<!-- home -->
<template>
  <div class="container">
    <div class="sticky">
      <van-search placeholder="请输入搜索关键词" @click="toSearch" shape="round" background="#EB2023" />
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in companyListFront" :key="item.companyId" style="height: 150px">
        <img :src="item.advertisingLogo" class="front_img" @click="toCompanyInfo(item.companyId)"/>
      </van-swipe-item>
    </van-swipe>
    <van-tabs @click="onClickFl" sticky offset-top="46px">
      <van-tab v-for="index in platformProductCategory" :title="index.name" :key="index.categoryId" />
    </van-tabs>
  <!--   <div class="title_bg" v-if="companyList1.length > 0 ">
      <div class="title_sx"/>
      <div class="title_name">火爆招商</div>
      <div class="more" @click="viewMore">查看更多</div>
      <div style="padding-top: 5px;position:absolute;right: 10px;">
        <van-image
          width="16px"
          height="16px"
          src="https://sqyfximage.oss-cn-qingdao.aliyuncs.com/zhmc/images/fxy.png"
        />
      </div>
    </div> 
    <div class="zs_bg">
      <div v-for="item in companyList1" :key="item.companyId" class="zs_item" @click="toCompanyInfo(item.companyId)">
        <img :src="item.advertisingLogo" class="gg_img1" />
        <div style="width:100%;background-color: white;text-align: center;font-size: 16px;padding-bottom: 5px;padding-top: 5px;">
          {{item.name.length <= 11 ? item.name:item.name.substring(0,10) + '...'}}
        </div>
      </div>
    </div>

    <div class="title_bg">
      <div class="title_sx"/>
      <div class="title_name">为您推荐</div>
    </div>-->
    <div class="zs_bg" v-if="productList.length > 0 ">
      <div v-for="item in productList" :key="item.productId" class="zs_item" @click="toProductInfo(item.companyId,item.productId,item.goodsType)">
        <img :src="item.image1" class="gg_img" />
        <div style="width:100%;background-color: white;text-align: center;font-size: 16px;padding-bottom: 5px;padding-top: 5px;">
          {{item.name != null ? item.name.substring(0,11):''}}
        </div>
      </div>
    </div>
    <div v-else>
      <van-empty image="error" description="没有相关商品" />
    </div>

  </div>
</template>

<script>

import { addHyinfo, getAccessToken, getUserInfo, queryCompanyInfo, queryPlatformProductCategory, queryProductInfo } from '../../api/api'
import wechat from '../../utils/wechat'
export default {
  data() {
    return {
      companyListFront: [],
      companyList1: [],
      platformProductCategory: [],
      platformCategory: '',
      productList:[],
      pageNum:1,
      pageSize: 10,
      openid:'',
    }
  },

  created() {
    let that = this 
    let openid = localStorage.getItem('openid')
    if(!openid){
      that.getWxopenid()
    }else{
      that.openid = openid
    }
    this.queryCompanyInfoFront()
    this.queryCompanyInfo1()
    this.queryPlatformProductCategory()
    this.queryProductInfo()
    window.onscroll = function(){
      debugger
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
      //滚动条到底部的条件
      if(scrollTop+windowHeight >= scrollHeight-40){
        //写后台加载数据的函数
        that.pageNum = that.pageNum + 1
        that.queryProductInfo()
      }
    }

  },
  mounted() { },

  methods: {
    getWxopenid(){
      let that = this
      wechat.getOpenId().then(data => {
        debugger
          let code = data.code
          if (code) {
            console.log('code',code)
            try {
              let param = {
                code: code,
              }
              getAccessToken(param).then(res => {
                if(res.code == 200){
                  let access_token = res.data.access_token
                  let openid = res.data.openid
                  that.openid = openid
                  that.accessToken = access_token
                  console.log('access_token',access_token)
                  localStorage.setItem('openid', res.data.openid)
                  let data2 = {
                    openid: openid,
                    access_token: access_token
                  }
                  getUserInfo(data2).then(res1 => {
                    if(res1.code == 200){
                      data2 = res1.data
                      that.saveHyinfoByOpenid(data2);
                    }
                  })
                }
              })
            } catch (error) {
              console.error('获取失败:', error);
            }
          }
      })
      .catch(error => {
        debugger
        console.error('获取失败:', error)
      })
    },

    // 保存会员信息
    saveHyinfoByOpenid(param){
      let that = this
      param.wxname = param.nickname
      addHyinfo(param).then(response => {
        debugger
        // 处理响应数据，例如更新状态或显示消息
        console.log('添加成功:', response)
        if(response.code == 200){           
          that.hyid = response.data.hyid
          that.zhye = response.data.zhye
          localStorage.setItem('wxname', response.data.wxname)
          localStorage.setItem('hyid', that.hyid)
          localStorage.setItem('headimgurl', that.headimgurl)
        }else{
          console.log('添加失败:', response)
        }
      })
    },
  
    queryCompanyInfoFront() {
      const param = { shelvesArea: '1' }
      queryCompanyInfo(param).then(response => {
        this.companyListFront = response.data
      })
    },
    queryCompanyInfo1() {
      const param = { shelvesArea: '2', platformCategory: this.platformCategory,pageSize:4,pageNum:1}
      queryCompanyInfo(param).then(response => {
        console.log(response.data)
        this.companyList1 = response.data
      })
    },
    queryPlatformProductCategory() {
      const param = { parentId: 0 }
      queryPlatformProductCategory(param).then(response => {
        this.platformProductCategory = [{ categoryId: '', name: '全部' }, ...response.data]
      })
    },
    onClickFl(name, title) {
      this.platformCategory = this.platformProductCategory[name].categoryId
      this.pageNum = 1
      this.queryCompanyInfo1()
      this.queryProductInfo()
    },
    toCompanyInfo(companyId) {
      this.$router.push({ path: '/company', query: { companyId: companyId }})
    },
    toSearch() {
      this.$router.push({ path: '/search', query: {}})
    },
    queryProductInfo() {
      const param = {pageSize:this.pageSize,pageNum:this.pageNum,platformCategory: this.platformCategory ,goodsType:'2'}
      let that = this
      queryProductInfo(param).then(response => {
        console.log(response)
        that.productList = that.pageNum == 1 ? response.data:that.productList.concat(response.data)
      })
    },

    toProductInfo(companyId, productId,goodsType) {
      if(goodsType == '1'){
        this.$router.push({ path: '/mallproduct', query: { companyId: companyId, productId: productId }})
      }else{
        this.$router.push({ path: '/product', query: { companyId: companyId, productId: productId }})
      }

    },
    viewMore(){
      this.$router.push({ path: '/companylist', query: { }})
    }

  }
}
</script>
<style lang="scss" scoped>

  .container{
    width: 100%;
    height: auto;
    background-color: #F0F0F0;
  }

  .container::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .my-swipe .van-swipe-item {
    z-index: 1000;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }

  .my-swipe .van-swipe-item::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .my-swipe::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .front_img{
    width: 100%;
    height: 150px;
  }
  .title_bg{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding:10px;
    background-color: white;
    margin-top: 5px;
  }
  .title_sx{
    height: 15px;
    width: 3px;
    background-color: #f50;
  }
  .title_name{
    color:#333333;
    font-size: 16px;
    margin-left: 5px;
  }
  .zs_bg{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding-left:10px;
    padding-right:10px;
    background-color: white;
  }

  .zs_bg::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .zs_item{
    width: 48%;
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    margin-top: 10px;
    border-radius: 5px;
    box-shadow:-2px 0 3px -1px #fff, 0 -2px 3px -1px #fff, 0 2px 3px -1px #B1B1B1, 2px 0 3px -1px #B1B1B1;
  }
  .gg_img{
    width: 100%;
    height: 130px;
  }

  .gg_img1{
    width: 100%;
    height: 100px;
  }

  .search{
    background-color: #ff5500;
  }

  .more{
    color:#CCCCCC;
    font-size: 14px;
    position: absolute;
    right: 25px;
  }

  .more::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .sticky {
    z-index: 100;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
  }


</style>
